<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background: none;
				width: 100%;
				height: 100%;
			}
			
			#update {
				position: fixed;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				z-index: 1000;
				background: #fff;
				border-radius: 10px;
				width: 80%;
				max-width: 300px;
				padding-bottom: 12px;
			}
			
			.update_img {
				width: 150px;
				position: absolute;
				left: 50%;
				top: 0%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				z-index: 1000;
			}
			
			.update_img img {
				vertical-align: middle;
				width: 100%;
			}
			
			.update_title {
				margin-top: 80px;
				text-align: center;
				color: #333;
				font-size: 18px;
				font-weight: 700;
			}
			
			.update_title>span {
				font-weight: normal;
				font-size: 12px;
				margin-left: 4px;
				color: #666;
			}
			
			.update_main {
				font-size: 12px;
				width: 84%;
				margin: 18px auto;
				color: #999;
			}
			
			.update_button {
				width: 46%;
				margin: 0 auto;
			}
			
			.update_button button {
				width: 100%;
				border-color: #1ce7bf;
				background: #1ce7bf;
				border-radius: 12px;
			}
			
			.close {
				position: absolute;
				right: -6px;
				top: -8px;
				width: 46px;
				height: 46px;
				padding: 14px;
			}
			
			.close img {
				width: 100%;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div id="update" v-cloak>
			<div class="update_img"><img src="../../images/update.png" /></div>
			<div class="update_title">
				发现新版本
				<span>V{{data.newVer}}</span>
			</div>
			<div class="update_main" v-html="data.content">

			</div>
			<div class="update_button">
				<button type="button" class="mui-btn mui-btn-success" @tap="update">立刻更新</button>
			</div>
			<div class="close mui-action-back" v-if="!isForce"><img src="../../images/close.png" /></div>
		</div>
		<div class="mui-backdrop"></div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				var clock = mui.back
				var self = plus.webview.currentWebview();
				// 关闭侧滑返回功能
				self.setStyle({
					'popGesture': 'none'
				});
				var update = new Vue({
					el: '#update',
					data: {
						imgCommonUrl: common.imageUrl,
						data: self.preate,
						//强制更新
						isForce: false,
						//version版本号
					},
					methods: {
						update: function() {
							var self = this
							mui.openWindow({
								id: "../mask/nesting.html",
								url: 'nesting.html',
								extras: {
									url: self.data.url
								}
							});
							if(!update.isForce) {
								setTimeout(function(){
									plus.webview.currentWebview().close('none')
								},300)
							}
						}
					}
				})
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					var wgtVer = inf.version;
					if(update.data.exemptForceVer > wgtVer) {
						update.isForce = true
					} else {
						update.isForce = false
					}
				})

				var _toast = false
				mui.back = function() {
					if(update.isForce) {
						if(!_toast || !_toast.isVisible()) {
							_toast = mui.toast('再按一次返回键退出', {
								type: 'div'
							});
						} else {
							plus.runtime.quit();
						}
					} else {
						clock()
					}
				}
			})
		</script>
	</body>

</html>